import {Component} from 'react';
import bus from '../../utils/bus';

class Cate extends Component{
    state ={
        list:[],
        renderList:[]
    }
    render(){
        let {renderList} = this.state
        return(
            <div style={{width:"1400px",margin:'0 auto',display:"flex",justifyContent:"space-between",flexWrap:"wrap"}}>
                {
                    renderList.map((item,index)=>{
                        return (
                            <div key={index} style={{width:'150px',textAlign:"center",padding:"10px",background:"#f1f1f1",marginTop:"20px"}}>
                                <img src={item.game_icon} alt="" style={{width:"100%",borderRadius:"50%"}}/>
                                <p>{item.game_name}</p>
                            </div>
                        )
                    })
                } 
            </div>
        )
    }
    componentDidMount(){
        bus.emit("sendTitle","分类");
        // 获取分类列表
        this.$axios.get('/douyu/api/RoomApi/game').then(res=>{
            console.log(res)
            this.setState({
                list:res.data.data,
                renderList:res.data.data.splice(0,45)
            })
        })
        window.onscroll = ()=>{
              // 获取内容总高度
          let scrollHeight = document.documentElement.scrollHeight;
          // 获取浏览器高度
          let clineHeight = document.documentElement.clientHeight;
          // 获取滚动高度
          let scrollTop = document.documentElement.scrollTop;
          if(scrollHeight-clineHeight-scrollTop<=0){
              console.log("滚动到底部啦")
               console.log(this.state.list) 
         
               this.setState({
                renderList:[...this.state.renderList,...this.state.list.splice(0,45)]
            })
          }
        }
    }
}
export default Cate